<template>
  <div class="progress-bar">
    <div class="bar" :title="tips">
      <div class="outer">
        <div
          class="inner"
          :style="{
            width: rateComputed + '%',
            backgroundColor: progressColor(rateComputed),
          }"
        ></div>
      </div>
    </div>
    <div class="info" v-if="total">{{ value }}/{{ total }}</div>
  </div>
</template>

<script>
export default {
  name: 'ProgressBar',
  components: {},
  props: {
    rate: {
      type: [Number, String],
    },
    value: {
      type: [Number, String],
    },
    total: {
      type: [Number, String],
    },
    tips: {
      type: String,
    },
  },
  data() {
    return {}
  },
  computed: {
    rateComputed() {
      if (this.rate !== undefined && this.rate !== null) {
        return this.rate - 0
      } else if (this.total > 0) {
        let rate = Math.floor((this.value * 100) / this.total)
        if (rate < 1 && rate > 0) {
          rate = 1
        }
        return rate
      }
      return 0
    },
  },
  watch: {},
  created() {},
  mounted() {},
  methods: {
    progressColor(val) {
      if (val < 30) {
        return '#F56C6C'
      } else if (val < 60) {
        return '#E6A23C'
      } else if (val < 90) {
        return '#409EFF'
      } else if (val === 100) {
        return '#67C23A'
      }
    },
  },
}
</script>
<style lang="scss" scoped>
.progress-bar {
  display: flex;
  align-items: center;
  .bar {
    flex: 1;
    padding: 10px 0;
    .outer {
      background: #dfdfdf;
      height: 5px;
      border-radius: 4px;
      overflow: hidden;
    }
    .inner {
      height: 100%;
    }
  }
  .info {
    margin-left: 10px;
    font-size: 12px;
    line-height: 12px;
    color: #666;
    margin-top: -2px;
  }
}
</style>
